<template>
	<div class="p30">
		<div>components</div>
		<div>组件之间传值，父子组件互相传值</div>

		<div class="pt30"></div>
		<div class="flex flex-around">
			<div class="father pr30">
				我是父级页面的文字，下面我将引用 
				<div class="pt30"></div>
				<div>{{channum}}</div>
				<div class="pt30"></div>
				<div>{{happynum}}</div>
			</div>
			
			<sons :faterobj='faterobj' @chages='chages' @happy='happy'> 
				<!-- <div>普通插槽 的值</div> -->
				
				<template #logs>
					具名插槽 的值
				</template>
				
				<template v-slot='{data}' >
					{{data}}
				</template>
			</sons>
		</div>
	</div>

	
	
</template>

<script setup>
	import sons from '@/components/sons/index.vue'
	import { reactive, ref } from 'vue';
	
	const faterobj = reactive({
		name:'父级传进来的数据',
		num:2023
	})
	
	const channum = ref('子组件传进来的值')
	const happynum = ref('小按钮的值')
	
	
	let chages = (e)=>{
		channum.value = channum.value + '||' + e.value
	}
	
	let happy = (e)=>{
		happynum.value = happynum.value + '||' + e
	}
	
</script>

<style scoped lang="scss">
	.father{
		border-right: 5px solid #333;
	}
</style>